<template>
  <view>
    <!-- 头部 -->
    <view class="top">
      <image class="top-icon"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/pssfkh4z8xj2d6w5cl41q4ut54wzg0dwnlf65acaa29-1ef5-44e0-a3ec-76fd991386e9"
        @click="toReturn()"></image>
      <view class="top-text">找回密码</view>
    </view>
    
    <view v-if="isState==1">
      <!-- 账号密码 -->
      <view class="phone-box">
        <input v-model="phone" class="phone-input" placeholder="请输入手机号" type="number"/>
      </view>
      <view class="code-box">
        <view class="code-inputBox">
          <input v-model="code" class="code-input" maxlength="6" placeholder="请输入验证码" type="number"/>
        </view>
        <view class="code-textBox" :style="number!=''?'pointer-events: none;':''" @click="getCode">
          {{number}}获取验证码
        </view>
      </view>
      <!-- 登录按钮 -->
	  
		   <view class="button-box" @click="next">下一步</view>
	 
     
    </view>
    
    <!-- 二次密码 -->
    <view v-if="isState==2">
      <view class="text-info">密码必须是6-16位数字、字母和符号组成</view>
      <!-- 账号密码 -->
      <view class="password1">
        <input v-model="newPassword1" class="password1-input" placeholder="请输入新密码" type="password"/>
      </view>
      
      <view class="password2">
        <input v-model="newPassword2" class="password2-input" placeholder="请确认新密码" type="password"/>
      </view>

      <!-- 登录按钮 -->
      <view class="button-box" @click="nextStep">设置密码</view>
    </view>
    
    <!-- 修改密码成功页面 -->
    <view class="succeed-box" v-if="isState==3">
      <view class="succeed-info">
        <image class="info-icon" src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps5vqfwh376vga1x64u9vmuppaz386yyy2ie5db170b-944e-4acd-b52e-b0d4a3934619"></image>
        <view class="info-text1">操作成功</view>
        <view class="info-text2">已成功修改密码</view>
      </view>
      <view class="succeed-button" @click="toLogin()">返回登录</view>
    </view>
    
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isState:1,
		show:true,
        number: '',//倒计时
        phone:'',//手机号
        code:'',//验证码
        uuid:'',//验证码uuid
        newPassword1:'',//输入密码  
        newPassword2:'',//确认密码
      }
    },
    methods: {
		next(){
			if(this.phone==''){
				uni.$showMsg('请先输入手机号码')
				return
			}	
			if(this.code==''){
				uni.$showMsg('请先获取验证码')
				return
			}
			if(this.show){
				uni.$showMsg('请先获取验证码')
				return
			}
			this.isState=2
		},
      toLogin(){
        uni.reLaunch({
          url:'/pages/login/login'
        })
      },
      // 返回
      toReturn() {
        uni.navigateBack({
          delta: 1
        })
      },
      async getCode(){
        if(this.phone){
          //倒计时
          //发送短信
          let param = {
            phone: this.phone
          }
          let res = await this.$http('/im/yunxin/getSmsCode', 'post', param)
          if (res.data.code == 200) {
			  this.show=false
			  this.number = 60
			  let interval = setInterval(() => {
			    this.number--
			    if (this.number == 0) {
			      this.number = ''
			      clearInterval(interval)
			    }
			  }, 1000)
            this.uuid = res.data.data.uuid
			
          } else {
            uni.showToast({
              title: res.data.msg,
			  icon:'none',
              duration: 1500
            })
          }
        }
      
      },
      //下一步
      async nextStep(){
        //整理参数
        let params = {
          userType: 'mobile', //个人或企业
          smsCode: this.code,
          uuid: this.uuid,
          phone: this.phone,
          password: this.newPassword1,
          modify: "password",
        }
        let res=await this.$http('/auth/modifyPassWrod','put',params)
        if (res.data.code == 200) {
         this.isState=3
        } else {
          let title = res.data.msg
          uni.$showMsg(title)
        }
      }
    }
  }
</script>

<style lang="scss">
  .top {
    width: 750rpx;
    height: 88rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psfiuuy9gq5ln2cg20o0mcbhjgadvp6vxj897f089bb-fcb6-4328-81f6-bacd144e6c50) 100% no-repeat;
    background-size: 100% 100%;
    color: #fff;
    display: flex;
    align-items: center;
    margin-right: 51rpx;

    .top-icon {
      margin-left: 31rpx;
      width: 20rpx;
      height: 35rpx;
      background-size: 100%;
    }

    .top-text {
      margin-left: 250rpx;
    }
  }
  
  //账号密码
  .phone-box{
    margin: 100rpx auto 0 auto;
    width: 688rpx;
    height: 84rpx;
    border-radius: 30rpx;
    border: 1rpx #CDAD66 solid;
    display: flex;
    align-items: center;
    .phone-icon{
      width: 35rpx;
      height: 35rpx;
      background-size: 100%;
      margin-left: 42rpx;
      margin-top: 27rpx;
      margin-bottom: 24rpx;
      margin-right: 14rpx;
    }
    .phone-input{
      margin-left: 36rpx;
      font-size: 27rpx;
      width: 500rpx;
      }
  }
  .code-box{
    display: flex;
    margin-top: 50rpx;
    margin-left: 31rpx;
    .code-inputBox{
      display: flex;
      align-items: center;
      width: 464rpx;
      height: 84rpx;
      border: 1rpx #CDAD66 solid;
      border-radius: 30rpx;
      margin-right: 20rpx;
      .code-input{
        font-size: 27rpx;
        margin-left: 35rpx;
      }
    }
    .code-textBox{
      width: 200rpx;
      height: 86rpx;
      background-color: #B2B0AB;
      border-radius: 30rpx;
      font-size: 27rpx;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  
  //登录按钮
  .button-box{
    width: 690rpx;
    height: 86rpx;
    background-color: #CDAD66;
    border-radius: 30rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 59rpx auto 39rpx auto;
  }
  
  .text-info{
    color: #CDAD66;
    font-size: 20rpx;
    margin-top: 70rpx;
    margin-left: 91rpx;
  }
  .password1{
    width: 688rpx;
    height: 84rpx;
    border-radius: 30rpx;
    border: 1rpx #CDAD66 solid;
    display: flex;
    align-items: center;
    margin: 10rpx auto 0 auto;
    .password1-input{
      width: 550rpx;
      margin-left: 60rpx;
      font-size: 27rpx;
    }
  }
  .password2{
    width: 688rpx;
    height: 84rpx;
    border-radius: 30rpx;
    border: 1rpx #CDAD66 solid;
    display: flex;
    align-items: center;
    margin: 50rpx auto 59rpx auto;
    .password2-input{
      width: 550rpx;
      margin-left: 60rpx;
      font-size: 27rpx;
    }
  }
  
  .succeed-box{
    text-align: center;
    .succeed-info{
      .info-icon{
        margin-top: 107rpx;
        width: 87rpx;
        height: 87rpx;
        background-size: 100%;
      }
      .info-text1{
        margin-top: 25rpx;
        font-size: 32rpx;
        color: #CDAD66;
      }
      .info-text2{
        margin-top: 15rpx;
        font-size: 24rpx;
        color: #999999;
      }
    }
    .succeed-button{
      width: 690rpx;
      height: 86rpx;
      background-color: #CDAD66;
      border-radius: 30rpx;
      margin: 82rpx auto 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 36rpx;
    }
  }
  
</style>
